<template>
  <div v-loading="infoLoading">
    <div v-if="Object.keys(detailInfo).length > 0">
      <div class="msg-title">客户税务基本信息</div>
      <div class="basic-box">
        <div class="msg-item">
          <div class="msg-left">公司名称：</div>
          <div class="msg-right">
            {{
              detailInfo.enterpriseInfo.taxpayerName
                ? detailInfo.enterpriseInfo.taxpayerName
                : "-"
            }}
          </div>
        </div>
        <div class="msg-item">
          <div class="msg-left">所属省份：</div>
          <div class="msg-right">
            {{ detailInfo.provinceName ? detailInfo.provinceName : "-" }}
          </div>
        </div>
        <div class="msg-item">
          <div class="msg-left">税号：</div>
          <div class="msg-right">
            {{
              detailInfo.enterpriseInfo.creditCode
                ? detailInfo.enterpriseInfo.creditCode
                : "-"
            }}
          </div>
        </div>
        <div class="msg-item">
          <div class="msg-left">税务密码：</div>
          <div class="msg-right">
            {{
              detailInfo.enterpriseInfo.password
                ? detailInfo.enterpriseInfo.password
                : "-"
            }}
          </div>
        </div>
        <div class="msg-item">
          <div class="msg-left">法人：</div>
          <div class="msg-right">
            {{
              detailInfo.enterpriseInfo.legalPerson
                ? detailInfo.enterpriseInfo.legalPerson
                : "-"
            }}
          </div>
        </div>
        <!-- <div class="msg-item">
          <div class="msg-left">公司占比：</div>
          <div class="msg-right">
            {{
              detailInfo.enterpriseInfo.legalPersonRatio
                ? `${detailInfo.enterpriseInfo.legalPersonRatio}%`
                : "-"
            }}
          </div>
        </div> -->
        <div class="msg-item">
          <div class="msg-left">联系方式：</div>
          <div class="msg-right">
            {{
              detailInfo.enterpriseInfo.phone
                ? detailInfo.enterpriseInfo.phone
                : "-"
            }}
          </div>
        </div>
      </div>
      <div class="msg-title">纳税信用</div>
      <el-table :data="tableData.data3" border style="width: 100%">
        <el-table-column
          align="center"
          prop="evaluationYear"
          label="评价年度"
        />
        <el-table-column
          align="center"
          prop="evaluationScore"
          label="评价得分"
        />
        <el-table-column
          align="center"
          prop="evaluationResult"
          label="评价结果"
        />
      </el-table>
      <div class="msg-title">开票金额</div>
      <div>
        <monthTable :table-list="tableData.data2"></monthTable>
      </div>
      <div class="msg-title">纳税金额</div>
      <div>
        <monthTable :table-list="tableData.data1"></monthTable>
      </div>
    </div>
  </div>
</template>
<script>
import { monthUtil } from "@/utils/date";
import monthTable from "../../../../components/monthTable/index.vue";
import { getCompanyCustomerDetail } from "@/api/customer";
export default {
  name: "customDetail",
  components: {
    monthTable
  },
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      detailInfo: {},
      infoLoading: true,
      tableData: {
        data1: [],
        data2: [],
        data3: []
      }
    };
  },
  created() {
    this.getDetail();
  },
  activated() {},
  methods: {
    getDetail() {
      this.infoLoading = true;
      getCompanyCustomerDetail(this.id)
        .then(res => {
          this.detailInfo = res.data;
          //纳税
          this.tableData.data1 = res.data.paidTaxesDataList.map(v => {
            return {
              year: v.year,
              ...monthUtil(v.monthData),
              add: v.total
            };
          });
          // 开票
          this.tableData.data2 = res.data.applayInfoDataList.map(v => {
            return {
              year: v.year,
              ...monthUtil(v.monthData),
              add: v.total
            };
          });
          // 纳税信用
          console.log(res.data.creditEvaluationList);
          this.tableData.data3 = res.data.creditEvaluationList;
          this.infoLoading = false;
        })
        .finally(() => {
          this.infoLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-tabs__header {
  margin: 0;
}

.msg-title {
  font-size: 14px;
  color: #222;
  padding-left: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.basic-box {
  padding: 10px 50px;
  //width: 100%;
  //height: 100%;
  //background: #fff;
  .msg-item {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    .msg-left {
      width: 10%;
      color: #222;
      text-align: right;
      margin-right: 10px;
    }
    .msg-right {
      width: 60%;
      background: #f5f5f5;
      border-radius: 4px;
      padding: 8px 18px;
      border: 1px solid #dddddd;
      color: #222;
    }
  }
}
</style>
